import React from 'react';
import { Breadcrumb, Button, Form, Col, Row, Input, Select, DatePicker, notification, Message} from 'antd';
import Region from '../../../components/Region/Region';
const FormItem = Form.Item;
const Option = Select.Option;

function noop() {
  return false;
}


let Add = React.createClass({


  contextTypes: {
    router: React.PropTypes.object
  },

  getInitialState() {
    return {
      loading: false,
      province: '110000',
      city: '110100',
      district: '110101',
      areaId: '110101',
      tenementId:'',
      houseData: {},
      decorate:'' ,//装修情况
      rentPeriod:'',//付款周期
      isSee:'',//是否看过房源
      rent:'', //租金
      area:'',//房屋面积
      floor:'',//层
      period:'',
      totalFloor:''

    }
  },


  componentDidMount() {

    this.setState({
      tenementId:this.props.location.state.tenementId
    });

    this.fetchHouseInfo(this.props.location.state.tenementId);
  },

  //获取房间详细信息
  fetchHouseInfo(tenementId) {
    let _me = this;
    Utils.sendAjax({
      url: '/tenement/intention/find',
      data: JSON.stringify({"tenementId":tenementId}),
      callback:(result) => {
        if (result.code === '200') {
          let houseData = result.data;
          _me.setState({
            houseData:  houseData,
            areaId: houseData.district,
            decorate: houseData.decorate,
            rentPeriod:houseData.rentPeriod,
            rent:houseData.rent,
            area:houseData.area,
            isSee:houseData.isSee,
            floor:houseData.floor,
            totalFloor:houseData.totalFloor,
            period:houseData.period,
            district:houseData.district,
            city:houseData.city,
            province:houseData.province,
          })
        } else {
          Message.error(result.message, 10);
        }
      }
    });

  },

  handleSubmit(e) {
    e.preventDefault();
    let ids = this.props.location.state;
    let form = this.props.form.getFieldsValue();
    let leaseInception = form.leaseInception;
    if(typeof leaseInception != 'string'){
       leaseInception = Utils.formatDate(leaseInception); 
    }
    
    let region = {province: this.state.province, city: this.state.city, district: this.state.district};
    let params = Object.assign({}, form, region, ids, {leaseInception: leaseInception});
    
    console.log('收到表单值',ids ,params);

    this.props.form.validateFields((errors, values) => {
      if (!!errors) {
        console.log('Errors in form!!!');
        return;
      }
      this.setState({
        loading: true
      });
      Utils.sendAjax({
        url: '/tenement/intention/update',
        data: JSON.stringify(params),
        callback: (result)=> {
          if (result.code == 200) {
            this.handleBack();
          } else {
            this.setState({
              loading: false
            });
            Message.error(result.message, 10)
          }
        }
      })
    });
  },


  //返回按钮
  handleBack() {
    let goPathUrl = '/landlord/rentBeforeIndex/list';
    let state = this.props.location.state;
    this.context.router.push({pathname: goPathUrl, state: {...state}});
  },

  changeAreaId(area) {
    selectedArea = String(area);
    var selectedProvince = selectedArea.substr(0, 2) + "0000";
    var selectedCity = selectedArea.substr(0, 4) + "00";
    this.setState({
      province: selectedProvince,
      city: selectedCity,
      district: selectedArea,
      areaId: area,
    })
  },


  floor(rule, value, callback) {
    const { validateFields } = this.props.form;
    if (!value) {
      value = '';
    }
    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      callback();
    } else {
      callback('请输入大于0的整数');
    }
    if (value) {
      validateFields(['totalFloor'], {force: true});
    }
    callback();
  },

  Floor(rule, value, callback) {
    const { getFieldValue } = this.props.form;
    if (!value) {
      value = '';
    }

    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      if (value && value < parseInt(getFieldValue('floor'))) {
        callback('总楼层不能小于楼层数');
      } else {
        callback();
      }
    } else {
      callback('请输入大于0的整数');
    }
  },

  rentNum(rule, value, callback) {
    const { getFieldValue } = this.props.form;
    if (!value) {
      value = '';
    }
    if (!!value && value.match(/^\+?[1-9][0-9]*$/g)) {
      if (value && value < parseInt(getFieldValue('rentPeriod'))) {
        callback('租约期限不能小于付款周期');
      } else {
        callback();
      }
    } else {
      callback('请输入大于0的整数');
    }
  },

  render () {

    // 装修情况
    let houseData = this.state.houseData;
    const { getFieldProps, getFieldError, isFieldValidating } = this.props.form;
    const ownerNameProps = getFieldProps('ownerName', {
      initialValue: houseData.ownerName,
      rules: [
        {required: true, message: '业主姓名不能为空'},
        {validator: Utils.name}
      ],
    });

    const mobilePhoneProps = getFieldProps('mobilePhone', {
      initialValue: houseData.mobilePhone,
      rules: [
        {required: true, message: '联系电话不能为空'},
        {validator: Utils.phone},
      ],
    });

    const tenementNameProps = getFieldProps('tenementName', {
      initialValue: houseData.tenementName,
      rules: [
        {required: true, message: '物业名称不能为空'},
        {validator: Utils.company},
      ],
    });

    const addressProps = getFieldProps('address', {
      initialValue: houseData.address,
      rules: [
        {required: true, message: '房屋地址不能为空'},
      ],
    });

    const areaProps = getFieldProps('area', {
      initialValue: this.state.area.toString(),
      rules: [
        {required: true, message: '房屋面积不能为空'},
        {validator: Utils.num},
      ],
    });

    const decorateProps = getFieldProps('decorate', {
      initialValue:this.state.decorate.toString()
    });

    const bedroomCountProps = getFieldProps('bedroomCount', {
      initialValue: houseData.bedroomCount,
    });

    const hallCountProps = getFieldProps('hallCount', {
      initialValue: houseData.hallCount,
    });

    const toiletCountProps = getFieldProps('toiletCount', {
      initialValue: houseData.toiletCount,
    });


    
    const leaseInceptionProps = getFieldProps('leaseInception', {
      initialValue: houseData.leaseInception,
    });

    const floorProps = getFieldProps('floor', {
      initialValue: this.state.floor.toString(),
      rules: [
        {  whitespace: true, message: '请输入楼层' },
        { validator: this.floor}
      ],
    });

    const totalFloorProps = getFieldProps('totalFloor', {
      initialValue: this.state.totalFloor.toString(),
      rules: [
        {whitespace: true, message: '请输入总楼层'},
        {validator: this.Floor}
      ],
    });

    const periodProps = getFieldProps('period', {
      initialValue: this.state.period.toString(),
      rules: [
        {required: true, message: '租赁期限不能为空'},
        {validator: this.rentNum}
      ],
    });

    const rentPeriodProps = getFieldProps('rentPeriod', {
      initialValue:this.state.rentPeriod.toString(),
      rules: [
        {required: true, message: '请选择付款周期',},
      ],
    });

    const rentProps = getFieldProps('rent', {
      initialValue: this.state.rent.toString(),
      rules: [
        {required: true, message: '意向租金不能为空'},
        {validator: Utils.num},
      ],
    });

    const isSeeProps = getFieldProps('isSee', {
      initialValue:this.state.isSee.toString(),
    });


    const remarkProps = getFieldProps('remark', {
      initialValue: houseData.remark
    });

    const tenementIdProps = getFieldProps('tenementId', {
      initialValue:this.state.id
    });

    return (
        <div className="inner-content">
          <Form inline form={this.props.form}>
            <Input type="hidden" {...tenementIdProps}/>
            <div className="form-group form-group1">
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="业主姓名">
                    <Input {...ownerNameProps}/>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="联系电话">
                    <Input {...mobilePhoneProps} />
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="物业名称">
                    <Input {...tenementNameProps} />
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={24} className="adress">
                  <span className="sign">*</span>
                  <FormItem label="房屋地址">
                    <Region areaId={this.state.areaId} ref="region" onAreaChange={this.changeAreaId}/>
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={22} style={{marginLeft: 90}}>
                  <FormItem>
                    <Input  {...addressProps} style={{width: 600}}/>
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="房屋面积">
                    <Input  {...areaProps} style={{width: 162}}/>
                    <span>㎡</span>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="装修情况">
                    <Select {...decorateProps}
                        style={{width: 162}}>
                      <Option value="1">毛坯</Option>
                      <Option value="2">简装</Option>
                      <Option value="3">豪华</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="房屋户型">
                    <Select
                        defaultValue="1" {...bedroomCountProps}
                        style={{width: 55}}>
                      <Option value="1">1</Option>
                      <Option value="2">2</Option>
                      <Option value="3">3</Option>
                      <Option value="4">4</Option>
                      <Option value="5">5</Option>
                      <Option value="6">6</Option>
                      <Option value="7">7</Option>
                      <Option value="8">8</Option>
                      <Option value="9">9</Option>
                      <Option value="10">10</Option>
                      <Option value="11">11</Option>
                      <Option value="12">12</Option>
                    </Select>
                    <span>室</span>
                    <Select
                        defaultValue="0" {...hallCountProps}
                        style={{width: 55}}>
                      <Option value="1">1</Option>
                      <Option value="2">2</Option>
                      <Option value="3">3</Option>
                      <Option value="4">4</Option>
                      <Option value="5">5</Option>
                      <Option value="6">6</Option>
                      <Option value="7">7</Option>
                      <Option value="8">8</Option>
                      <Option value="9">9</Option>
                      <Option value="10">10</Option>
                      <Option value="11">11</Option>
                      <Option value="12">12</Option>
                    </Select>
                    <span>厅</span>
                    <Select
                        defaultValue="0" {...toiletCountProps}
                        style={{width: 55}}>
                      <Option value="1">1</Option>
                      <Option value="2">2</Option>
                      <Option value="3">3</Option>
                      <Option value="4">4</Option>
                      <Option value="5">5</Option>
                      <Option value="6">6</Option>
                      <Option value="7">7</Option>
                      <Option value="8">8</Option>
                      <Option value="9">9</Option>
                      <Option value="10">10</Option>
                      <Option value="11">11</Option>
                      <Option value="12">12</Option>
                    </Select>
                    <span>卫</span>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="房屋楼层">
                    <span>第</span>
                    <Input {...floorProps} autoComplete="off" style={{width: 50}}
                                           onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                    />
                    <span>层，</span>
                  </FormItem>
                  <FormItem>
                    <span>共</span>
                    <Input {...totalFloorProps} autoComplete="off" style={{width: 50}}
                                                onContextMenu={noop} onPaste={noop} onCopy={noop} onCut={noop}
                    />
                    <span>层</span>
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="房屋起租时间">
                    <DatePicker {...leaseInceptionProps} style={{width: 162}} />
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="租赁期限">
                    <Input {...periodProps} style={{width: 162}}/>
                    <span>月</span>
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="付款周期">
                    <Select {...rentPeriodProps}
                        style={{width: 162}}>
                      <Option value="3">季</Option>
                      <Option value="6">半年</Option>
                      <Option value="12">年</Option>
                    </Select>
                  </FormItem>
                </Col>
                <Col sm={8}>
                  <FormItem label="意向租金">
                    <Input {...rentProps} style={{width: 162}}/>
                    <span>元/月</span>
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={8}>
                  <FormItem label="是否看过房源">
                    <Select {...isSeeProps}
                        /* {...decorateProps}*/
                        style={{width: 162}}>
                      <Option value="1">是</Option>
                      <Option value="-1">否</Option>
                    </Select>
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24}>
                <Col sm={24}>
                  <FormItem label="备注">
                    <Input type="textarea" placeholder="" {...remarkProps} style={{width: 600}}/>
                  </FormItem>
                </Col>
              </Row>
              <Row gutter={24} style={{margin: 20}}>
                <Col sm={8} offset={3}>
                  <FormItem>
                    <Button type="primary" loading={this.state.loading} onClick={this.handleSubmit}>提交</Button>
                    <Button type="ghost" style={{margin:20}} onClick={this.handleBack}>返回</Button>
                  </FormItem>
                </Col>
              </Row>

            </div>
          </Form>
        </div>
    );
  }
});

Add = Form.create()(Add);
export default Add